<template>
  <div class="create-room">
    <div class="container">
      <div class="create-layout">
        <!-- 创建表单 -->
        <div class="form-section">
          <div class="page-header">
            <h1>创建自习室</h1>
            <p>设置你的专属学习空间</p>
          </div>

          <el-form
            ref="createFormRef"
            :model="roomForm"
            :rules="roomRules"
            label-width="120px"
            class="create-form"
          >
            <!-- 基本信息 -->
            <div class="form-group">
              <h3>基本信息</h3>
              <el-form-item label="自习室名称" prop="roomName">
                <el-input
                  v-model="roomForm.roomName"
                  placeholder="给你的自习室起个名字"
                  maxlength="50"
                  show-word-limit
                />
              </el-form-item>

              <el-form-item label="自习室描述" prop="description">
                <el-input
                  v-model="roomForm.description"
                  type="textarea"
                  :rows="3"
                  placeholder="描述自习室的用途和特色"
                  maxlength="200"
                  show-word-limit
                />
              </el-form-item>

              <el-form-item label="学习分类" prop="type">
                <el-select v-model="roomForm.type" placeholder="选择学习分类">
                  <el-option label="考研学习" value="考研" />
                  <el-option label="编程开发" value="编程" />
                  <el-option label="语言学习" value="语言学习" />
                  <el-option label="职业技能" value="职业技能" />
                  <el-option label="学术研究" value="学术研究" />
                  <el-option label="其他" value="其他" />
                </el-select>
              </el-form-item>
            </div>

            <!-- 权限设置 -->
            <div class="form-group">
              <h3>权限设置</h3>
              <el-form-item label="房间类型" prop="openness">
                <el-radio-group
                  v-model="roomForm.openness"
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                  "
                >
                  <el-radio label="public">
                    <div class="radio-option">
                      <div class="option-title">公开房间</div>
                      <div class="option-desc">任何人都可以看到并加入</div>
                    </div>
                  </el-radio>
                  <el-radio label="friends">
                    <div class="radio-option">
                      <div class="option-title">好友房间</div>
                      <div class="option-desc">仅好友可见和加入</div>
                    </div>
                  </el-radio>
                  <el-radio label="private">
                    <div class="radio-option">
                      <div class="option-title">私密房间</div>
                      <div class="option-desc">需要房间号才能加入</div>
                    </div>
                  </el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="最大人数" prop="capacity">
                <el-slider
                  v-model="roomForm.capacity"
                  :min="2"
                  :max="20"
                  show-stops
                  show-input
                />
                <div class="slider-hint">
                  <span
                    >建议人数：{{ getRecommendedSize(roomForm.capacity) }}</span
                  >
                </div>
              </el-form-item>

              <el-form-item
                v-if="roomForm.openness === 'private'"
                label="房间密码"
                prop="password"
              >
                <el-input
                  v-model="roomForm.password"
                  type="password"
                  placeholder="请输入房间密码"
                  show-password
                />
                <div class="setting-hint">
                  私密房间需要设置密码，加入时需要验证
                </div>
              </el-form-item>
            </div>

            <!-- 功能设置 -->
            <div class="form-group">
              <h3>功能设置</h3>
              <div class="settings-grid">
                <div class="setting-item">
                  <div class="setting-header">
                    <el-icon><Camera /></el-icon>
                    <span>摄像头</span>
                  </div>
                  <el-switch
                    v-model="roomForm.enableCamera"
                    active-text="开启"
                    inactive-text="关闭"
                  />
                  <div class="setting-desc">允许参与者开启摄像头</div>
                </div>

                <div class="setting-item">
                  <div class="setting-header">
                    <el-icon><Microphone /></el-icon>
                    <span>麦克风</span>
                  </div>
                  <el-switch
                    v-model="roomForm.enableMic"
                    active-text="开启"
                    inactive-text="关闭"
                  />
                  <div class="setting-desc">允许参与者开启麦克风</div>
                </div>

                <div class="setting-item">
                  <div class="setting-header">
                    <el-icon><ChatDotRound /></el-icon>
                    <span>聊天功能</span>
                  </div>
                  <el-switch
                    v-model="roomForm.enableChat"
                    active-text="开启"
                    inactive-text="关闭"
                  />
                  <div class="setting-desc">启用房间内聊天功能</div>
                </div>

                <div class="setting-item">
                  <div class="setting-header">
                    <el-icon><Monitor /></el-icon>
                    <span>屏幕共享</span>
                  </div>
                  <el-switch
                    v-model="roomForm.enableScreenShare"
                    active-text="开启"
                    inactive-text="关闭"
                  />
                  <div class="setting-desc">允许参与者共享屏幕</div>
                </div>

                <div class="setting-item">
                  <div class="setting-header">
                    <el-icon><EditPen /></el-icon>
                    <span>协同笔记</span>
                  </div>
                  <el-switch
                    v-model="roomForm.enableNote"
                    active-text="开启"
                    inactive-text="关闭"
                  />
                  <div class="setting-desc">启用房间内笔记功能</div>
                </div>
              </div>
            </div>

            <div class="form-actions">
              <el-button size="large" @click="goBack">取消</el-button>
              <el-button
                type="primary"
                size="large"
                :loading="creating"
                @click="handlecreateRoom"
              >
                创建自习室
              </el-button>
            </div>
          </el-form>
        </div>

        <!-- 预览区域 -->
        <div class="preview-section">
          <div class="preview-card">
            <div class="preview-header">
              <h3>预览效果</h3>
            </div>

            <div class="room-preview">
              <div class="room-card">
                <div class="room-header">
                  <div class="room-title">
                    <h4>{{ roomForm.roomName || "自习室名称" }}</h4>
                    <el-tag :type="getRoomTypeTag(roomForm.openness)" size="small">
                      {{ getRoomTypeText(roomForm.openness) }}
                    </el-tag>
                  </div>
                  <div class="room-status">
                    <el-icon color="#67c23a"><VideoPlay /></el-icon>
                  </div>
                </div>

                <p class="room-description">
                  {{ roomForm.description || "自习室描述信息" }}
                </p>

                <div class="room-info">
                  <div class="info-item">
                    <el-icon><User /></el-icon>
                    <span>0/{{ roomForm.capacity }}</span>
                  </div>
                  <div class="info-item">
                    <el-icon><Clock /></el-icon>
                    <span>刚刚创建</span>
                  </div>
                </div>
                <div class="room-features">
                  <el-tooltip content="聊天" placement="top">
                    <div
                      class="feature-item"
                      :class="{ active: roomForm.enableChat }"
                    >
                      <el-icon><ChatDotRound /></el-icon>
                    </div>
                  </el-tooltip>
                  <el-tooltip content="摄像头" placement="top">
                    <div
                      class="feature-item"
                      :class="{ active: roomForm.enableCamera }"
                    >
                      <el-icon><Camera /></el-icon>
                    </div>
                  </el-tooltip>
                  <el-tooltip content="麦克风" placement="top">
                    <div
                      class="feature-item"
                      :class="{ active: roomForm.enableMic }"
                    >
                      <el-icon><Microphone /></el-icon>
                    </div>
                  </el-tooltip>
                  <el-tooltip content="屏幕共享" placement="top">
                    <div
                      class="feature-item"
                      :class="{ active: roomForm.enableScreenShare }"
                    >
                      <el-icon><Monitor /></el-icon>
                    </div>
                  </el-tooltip>
                  <el-tooltip content="笔记" placement="top">
                    <div
                      class="feature-item"
                      :class="{ active: roomForm.enableNote }"
                    >
                      <el-icon><EditPen /></el-icon>
                    </div>
                  </el-tooltip>
                </div>
                <div v-if="roomForm.openness === 'private'" class="room-password">
                  <el-input
                    placeholder="请输入房间密码"
                    type="password"
                    show-password
                    size="small"
                  >
                  </el-input>
                </div>

                <div class="room-actions">
                  <el-button type="primary" disabled>加入</el-button>
                </div>
              </div>
            </div>

            <div class="preview-tips">
              <h4>创建提示</h4>
              <ul>
                <li>选择合适的房间类型确保合适的人员加入</li>
                <li>清晰的名称和描述有助于吸引志同道合的学习伙伴</li>
                <li>适当的人数设置能保证良好的学习体验</li>
                <!-- <li>AI监控功能可以帮助分析学习效果</li> -->
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { useStudyRoomStore, useUserStore } from "@/stores";
import { ElMessage } from "element-plus";
import {
  VideoCamera,
  Microphone,
  ChatDotRound,
  Monitor,
  VideoPlay,
  User,
  Clock,
  Star,
} from "@element-plus/icons-vue";
import type { FormInstance, FormRules } from "element-plus";
import { createRoom } from "@/api/room";
const router = useRouter();
const studyRoomStore = useStudyRoomStore();
const userStore = useUserStore();
const createFormRef = ref<FormInstance>();
const creating = ref(false);
const roomForm = ref({
  roomName: "",
  description: "",
  type: "",
  openness: "public",
  capacity: 8,
  password: "",
  creator: 0,
  enableCamera: true,
  enableMic: true,
  enableChat: true,
  enableScreenShare: true,
  enableNote: true,
  canInvite: false,
});

const roomRules: FormRules = {
  roomName: [
    { required: true, message: "请输入自习室名称", trigger: "blur" },
    { min: 2, max: 50, message: "名称长度在2到50个字符", trigger: "blur" },
  ],
  description: [
    { required: true, message: "请输入自习室描述", trigger: "blur" },
    { min: 10, max: 200, message: "描述长度在10到200个字符", trigger: "blur" },
  ],
  openness: [{ required: true, message: "请选择学习分类", trigger: "change" }],
  type: [{ required: true, message: "请选择房间类型", trigger: "change" }],
  password: [
    {
      required: true,
      validator: (rule: any, value: string, callback: any) => {
        if (roomForm.value.openness === "private" && !value) {
          callback(new Error("私密房间必须设置密码"));
        } else if (
          roomForm.value.openness === "private" &&
          value &&
          (value.length < 6 || value.length > 20)
        ) {
          callback(new Error("密码长度应在6到20个字符之间"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
};

const getRecommendedSize = (size: number) => {
  if (size <= 4) return "小型讨论";
  if (size <= 8) return "小组学习";
  if (size <= 12) return "班级规模";
  return "大型会议";
};

const getRoomTypeTag = (type: string) => {
  const typeMap: Record<string, string> = {
    public: "",
    friends: "success",
    private: "info",
  };
  return typeMap[type] || "";
};

const getRoomTypeText = (type: string) => {
  const typeMap: Record<string, string> = {
    public: "公开",
    friends: "好友",
    private: "私密",
  };
  return typeMap[type] || "公开";
};

// TODO 这里创建房间后怎么推到房间方式需要再确认
const handlecreateRoom = async () => {
  if (!createFormRef.value) return;
  try {
    await createFormRef.value.validate();
    creating.value = true;
    roomForm.value.creator = userStore.currentUser.userId;
    console.log(roomForm.value);

    // 调用store创建房间
    createRoom(roomForm.value).then((res) => {
      //提成成功并询问是否进入
      if (res.code === 200) {
        ElMessage.success("自习室创建成功！");
        // 跳转到房间页面
        router.push(`/room/${res.data.roomId}`);
      } else {
        ElMessage.error("自习室创建失败！");
      }
    });
  } catch (error) {
    ElMessage.error("请填写完整信息");
  } finally {
    creating.value = false;
    router.push(`/study-room`);
  }
};

const goBack = () => {
  router.back();
};
</script>

<style scoped>
.create-room {
  width: 100%;
  height: 100vh;
  overflow: scroll;
}
.container {
  width: 100%;
}

.create-layout {
  padding: 2rem 10%;
  width: 100%;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.form-section {
  flex: 1;
  max-width: 65rem;
}

.page-header {
  margin-bottom: 40px;
}

.page-header h1 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 2.5rem;
}

.page-header p {
  margin: 0;
  color: #7f8c8d;
  font-size: 1.1rem;
}

.create-form {
  background: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.form-group {
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid #f0f0f0;
}

.form-group:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.form-group h3 {
  margin: 0 0 24px 0;
  color: #2c3e50;
  font-size: 1.2rem;
  font-weight: 600;
}

.radio-option {
  margin-left: 8px;
}

.option-title {
  font-weight: 600;
  color: #2c3e50;
}

.option-desc {
  font-size: 12px;
  color: #7f8c8d;
  margin-top: 2px;
}

.slider-hint {
  margin-top: 8px;
  font-size: 14px;
  color: #7f8c8d;
}

.setting-hint {
  font-size: 12px;
  color: #7f8c8d;
  margin-top: 4px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.setting-item {
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  text-align: center;
}

.setting-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  color: #2c3e50;
}

.setting-desc {
  font-size: 12px;
  color: #7f8c8d;
  margin-top: 8px;
  line-height: 1.4;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid #f0f0f0;
}

.preview-section {
  max-width: 25rem;
  min-width: 18rem;
  position: sticky;
  top: 10rem;
}

.preview-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.preview-header {
  margin-bottom: 24px;
}

.preview-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.2rem;
}

.room-preview {
  margin-bottom: 30px;
}

.room-card {
  border: 1px solid #e4e7ed;
  border-radius: 12px;
  padding: 20px;
  background: #fafafa;
}

.room-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.room-title {
  flex: 1;
}

.room-title h4 {
  margin: 0 0 6px 0;
  color: #2c3e50;
  font-size: 1.1rem;
}

.room-description {
  color: #7f8c8d;
  line-height: 1.5;
  margin-bottom: 16px;
  font-size: 14px;
}

.room-info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #909399;
  font-size: 12px;
}

.room-settings {
  margin-bottom: 16px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.room-actions {
  display: flex;
  justify-content: flex-end;
}

.preview-tips h4 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 1rem;
}

.preview-tips ul {
  margin: 0;
  padding-left: 20px;
  color: #7f8c8d;
  font-size: 14px;
  line-height: 1.6;
}

.preview-tips li {
  margin-bottom: 8px;
}

@media (max-width: 1024px) {
  .create-layout {
    flex-direction: column;
    gap: 30px;
  }

  .preview-section {
    width: 100%;
    position: static;
  }

  .form-section {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .create-form {
    padding: 20px;
  }

  .settings-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .form-actions {
    flex-direction: column;
  }
}

:deep(.el-radio) {
  display: block;
  margin-bottom: 16px;
  height: auto;
  line-height: 1.5;
}

:deep(.el-radio__label) {
  line-height: 1.5;
}
.room-features {
  display: flex;
  gap: 12px;
}

.feature-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #f5f5f5;
  color: #909399;
  transition: all 0.3s;
}

.feature-item.active {
  background-color: #ecfff0;
  color: #67c23a;
}

.feature-item.active:hover {
  background-color: #67c23a;
  color: white;
}
.room-password {
  margin-top: 16px;
  margin-bottom: 16px;
}
</style>
